<template>
	<div id="orderDetails">
		<van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
		<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">订单信息</van-divider>
		<van-cell-group :border="false">
			<van-field :value="details.order_number" label="订单编号" disabled />
		</van-cell-group>
		<van-cell-group :border="false">
			<van-field :value="details.patent_user" label="专利权人" disabled />
		</van-cell-group>
		<van-cell-group :border="false">
			<van-field :value="details.user_name" label="发明人" disabled />
		</van-cell-group>
		<van-cell-group :border="false">
			<van-field :value="details.patent_name" label="专利名称" disabled />
		</van-cell-group>
		<van-cell-group :border="false">
			<van-field :value="details.type" label="专利类型" disabled />
		</van-cell-group>
		<van-cell-group :border="false">
			<van-field :value="details.agent_name" label="代理人" disabled />
		</van-cell-group>
		<van-cell-group :border="false">
			<van-field :value="details.status" label="订单状态" disabled />
		</van-cell-group>
		<van-cell-group :border="false">
			<van-field  type="textarea"  autosize :value="details.remarks" label="备注信息" disabled />
		</van-cell-group>{{statussIndex}}
		<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">流程进度</van-divider>
		<light-timeline :items='statuss'>
			<template slot='tag' slot-scope='{ item }'>
				<h2 v-if="statussIndex[item.index]" :style="'color: '+(item.name!=''?'#3B8070':'#949fa8')+';'">{{statussIndex[item.index]}}</h2>
			</template>
			<template slot='content' slot-scope='{ item }'>
				<h4 style="margin-bottom: 0;" v-if="item.name!=''">{{item.name}}</h4>
				<h4 style="margin-bottom: 0;" v-if="item.name==''">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
				<p style="margin-top: 3px;" v-if="item.name!=''">{{item.pivot.created_at}}</p>
				<p style="margin-top: 3px;" v-if="item.name==''">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
			</template>
		</light-timeline>
	</div>
</template>

<script>
	export default {
		transition:'need',
		data() {
			return {
				show:true,
				details: this.$route.params.details,
				active: 0,
				statuss: [],
				statussIndex: {}, //状态的id对象。key为索引
				stepsText: ['提交申请', '代理人接单', '内审文件撰写', '案件内审', '发明人定稿', '申请文件撰写', '等待递交国知局'],
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1);
			}
		},
		//缓存也会走的钩子
		activated() {
			this.details = this.$route.params.details;
			//双边步骤条/时间轴
			let statuss = this.$route.params.details.statuss;
			//大步骤。key是索引，值是需要显示的文字
			let statussIndex = {};
			//是否已有该大步骤
			let hasIndex = {
				1: false,
				2: false,
				3: false,
				4: false,
				13: false,
				7: false,
				8: false,
			}
			//防止一直倒序的bug
			if(statuss[0].id != 1){
				statuss.reverse();
			}
			for (let i = 0; i < statuss.length; i++) {
				statuss[i].index = i;
				if (statuss[i].id == 1) {
					if (!hasIndex[1]) {
						statussIndex[i] = '提交申请';
						hasIndex[1] = true;
					}
				} else if (statuss[i].id == 2) {
					if (!hasIndex[2]) {
						statussIndex[i] = '代理人接单';
						hasIndex[2] = true;
					}
				} else if (statuss[i].id == 3) {
					if (!hasIndex[3]) {
						statussIndex[i] = '内审文件撰写';
						hasIndex[3] = true;
					}
				} else if (statuss[i].id == 4) {
					if (!hasIndex[4]) {
						statussIndex[i] = '案件内审';
						hasIndex[4] = true;
					}
				} else if (statuss[i].id == 13) {
					if (!hasIndex[13]) {
						statussIndex[i] = '发明人定稿';
						hasIndex[13] = true;
					}
				} else if (statuss[i].id == 7) {
					if (!hasIndex[7]) {
						statussIndex[i] = '申请文件撰写';
						hasIndex[7] = true;
					}
				} else if (statuss[i].id == 8) {
					if (!hasIndex[8]) {
						statussIndex[i] = '等待递交国知局';
						hasIndex[8] = true;
					}
				}
			}
			//显示未到达的大步骤
			// if(statuss[statuss.length-1].id==1){
			// 	statussIndex[statuss.length] = '代理人接单';
			// 	statussIndex[statuss.length+1] = '内审文件撰写';
			// 	statussIndex[statuss.length+2] = '案件内审';
			// 	statussIndex[statuss.length+3] = '发明人定稿';
			// 	statussIndex[statuss.length+4] = '申请文件撰写';
			// 	statussIndex[statuss.length+5] = '等待递交国知局';
			// 	statuss.push(...[{index:statuss.length,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+1,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+2,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+3,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+4,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+5,pivot:{created_at:''},name:''}])
			// }else if(statuss[statuss.length-1].id==2){
			// 	statussIndex[statuss.length] = '内审文件撰写';
			// 	statussIndex[statuss.length+1] = '案件内审';
			// 	statussIndex[statuss.length+2] = '发明人定稿';
			// 	statussIndex[statuss.length+3] = '申请文件撰写';
			// 	statussIndex[statuss.length+4] = '等待递交国知局';
			// 	statuss.push(...[
			// 	{index:statuss.length,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+1,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+2,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+3,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+4,pivot:{created_at:''},name:''}])
			// }else if(statuss[statuss.length-1].id==3){
			// 	statussIndex[statuss.length] = '案件内审';
			// 	statussIndex[statuss.length+1] = '发明人定稿';
			// 	statussIndex[statuss.length+2] = '申请文件撰写';
			// 	statussIndex[statuss.length+3] = '等待递交国知局';
			// 	statuss.push(...[
			// 	{index:statuss.length,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+1,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+2,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+3,pivot:{created_at:''},name:''}])
			// }else if(statuss[statuss.length-1].id==4){
			// 	statussIndex[statuss.length] = '发明人定稿';
			// 	statussIndex[statuss.length+1] = '申请文件撰写';
			// 	statussIndex[statuss.length+2] = '等待递交国知局';
			// 	statuss.push(...[
			// 	{index:statuss.length,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+1,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+2,pivot:{created_at:''},name:''}])
			// }else if(statuss[statuss.length-1].id==13){
			// 	statussIndex[statuss.length] = '申请文件撰写';
			// 	statussIndex[statuss.length+1] = '等待递交国知局';
			// 	statuss.push(...[
			// 	{index:statuss.length,pivot:{created_at:''},name:''},
			// 	{index:statuss.length+1,pivot:{created_at:''},name:''}])
			// }else if(statuss[statuss.length-1].id==7){
			// 	statussIndex[statuss.length] = '等待递交国知局';
			// 	statuss.push(...[
			// 	{index:statuss.length,pivot:{created_at:''},name:''}])
			// }
			this.statuss = [];
			this.statuss.push(...statuss);
			for(let key in statussIndex){
				this.statussIndex[key] = statussIndex[key];
			}
			//this.statussIndex = statussIndex;
		},
	}
</script>

<style lang="less">
	#orderDetails {
		height: 100%;
		background: white;

		.line-container {
			margin-left: -50px;
			margin-right: 80px;
			box-sizing: border-box;
			.gray-item-circle{
				border: 2px solid gray;
			}
			.item-tag {
				top: -35px;
				width: 200px;//auto;
				left: -320px;
				font-size: auto;
			}

			.line-item {
				padding: 0;
			}

			&::after {
				height: calc(100%);
			}
		}
	}
</style>
